#{extends 'main_bluehat.html' /}
#{set title: 'page.app.manager.adminUser' /}

#{set 'moreTemplates'}  
<script id="error-template" type="text/template">
	<div class="messages" style="background: red">
		<p><%= error.error %>
	</div>
</script>

<script id="pagination-template" type="text/template">
	<ul style="white-space:nowrap;">
		<% for(page in range) { %>
			<li class="page" style="display:inline-block;"><a href="#/page/<%= range[page] %>"><%= range[page] %></a></li>
		<% } %>
	</ul>
	<span>Total:</span> <%= total ? total : 0 %>
</script>

<script id="user-item-template" type="text/template">
<div  class="row">
	<div class="span1 avatar">
		<a href="<%= data.get("id") %>">
			<img width="60" height="60" class="postPic" src="@{'/public/images/user_60x60.png'}">
		</a>
	</div>
	<div class="span8">
		<div class="row">
			<div class="span4 name">
				<%= data.get("firstName") %> <%= data.get("lastName") %>
			</div>
		</div>
		<div class="row">
			<div class="span4 email">
				<%= data.get("email") %>
			</div>
		</div>
	</div>
	<div class="span2">
		<button name="admin" class="btn small">Admin</button>
	</div>
</div>

</script>

<script id="user-management-template" type="text/template">
<div class="modal-header">
	<a href="#" class="close">&times;</a>
    <h3>User management</h3>
</div>
<div class="modal-body">
	<form>
		<fieldset>
			<div class="row">
				<div class="span12">
					<div class="row">
						<div class="span4">
							<div class="clearfix">
								<select id="multiSelect" class="medium" name="allroles" multiple="multiple" size="5">
									<% for(role in model.get("roles")) { %>
										<% if(!model.get("roles")[role]) { %>
											<option><%= role %></option>
										<% } %>
									<% } %>
								</select>
							</div>
						</div>
						<div class="span2">
							<div class="row">
								<a href="#" class="btn small add" type="image" src="@{'/public/images/add.jpg'}" name="add"/>
							</div>
							<div class="row">
								<a href="#" class="btn small remove" type="image" src="@{'/public/images/remove.jpg'}" name="remove" width="5" height="5"/>
							</div>
						</div>
						<div class="span4">
							<div class="clearfix">
								<select id="multiSelect" class="medium" name="userroles" multiple="multiple" size="5">
									<% for(role in model.get("roles")) { %>
										<% if(model.get("roles")[role]) { %>
											<option><%= role %></option>
										<% } %>
									<% } %>
								</select>
							</div>
						</div>
					</div>
				</div>
			</div>
			
		</fieldset>
	</form>	
</div>
<div class="modal-footer">
	<button name="cancel" class="btn" type="reset">Cancel</button>
	<button name="save" class="btn primary">Save</button>
</div>
</script>

<script id="user-list-template" type="text/template">
	<!-- <div class="actions">
		<ul style="white-space:nowrap;>
			<li style="display:inline-block;"><button class="add">Add</button></li>
		</ul>
	</div> -->
	<div id="new">
	</div>
	<ul class="list">
	</ul>
	<div class="pagination">
	</div>
</script>

<script id="management-roles-template" type="text/template">
	<div class="actions">
		<button class="close">Close</button>
	</div>
	<ul>
	</ul>
</script>

<script id="role-item-template" type="text/template">
	<li>
	<% if(hasRole) { %>
		<div class="remove"><input class="remove" type="image" src="@{'/public/images/remove.jpg'}" name="image" width="15" height="15"/><span class="role"><%= role.get("role") %></span></div>
	<% } else { %>
		<div class="add"><input class="add" type="image" src="@{'/public/images/add.jpg'}" name="image" width="15" height="15"/><span class="role"><%= role.get("role") %></span></div>
	<% } %>
	</li>	
</script>
#{/set}
#{set 'moreScripts'}		
        <script type="text/javascript">
    	var Actions = {
            	
            	users:			#{jsAction @manager.ManagerController.users() /},
            	googleUsers:    #{jsAction @manager.ManagerController.googleusers() /},
            };
        $(document).ready(function(){
           
            var module = ideon.module("manager");
           
            var router = new module.Router.App();
            Backbone.history.start();
        });
        </script>
        <script src="@{'/public/javascripts/ideonlab/ideon.js'}" type="text/javascript" charset="${_response_encoding}"></script>
		<script src="@{'/public/javascripts/ideonlab/manager.js'}" type="text/javascript" charset="${_response_encoding}"></script>
#{/set}
        
        <div id="content" class="estilo_inform estilo_intranet">
				
		</div>

